<template>
	<view class="persnl" @click="handleOutsideClick">
		<view class="sculpture">
			 <view class="left">
			 	 头像
			 </view>
			 <view class="us_image">
			 	<view class="us_image_box">
			 		<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar" @click.stop>
							<image  style="width: 113rpx;height: 113rpx;border-radius: 50%;margin-right: 10rpx;"  :src="userInfo.avatar" mode=""></image>
							<u-icon name="arrow-right" color="#000" size="28" class="arrow-icon"></u-icon>
					</button>
			 	</view>
			 </view>
		</view>
		<!-- 昵称区域添加stop修饰符防止事件冒泡 -->
		<view class="sculpture" @click.stop="() => $nextTick(() => focus = true)">
			 <view class="left">
			 	 昵称
			 </view>
			 <view class="us_image">
				<view class="us_image_box">
					<input 
						ref="nicknameInput"
						name="nickName" 
						:focus="focus" 
						type="nickname" 
						:placeholder="userInfo.nickname" 
						v-model="username" 
						@input="inputs" 
						@blur="bncime"
						@click.stop
					> 
					<u-icon name="arrow-right" color="#000" size="28" class="icons arrow-icon"></u-icon>
				</view>
			 </view>
		</view>
		<view class="sculpture">
			 <view class="left">
			 	 手机号码
			 </view>
			 <view class="us_image">			
				 <view class="us_image_box">
				 	<view class="">
				 		{{userInfo.phone}}
				 	</view>
					<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
				 </view>
			 </view>
		</view>
		<view class="b_button">
			<view class="subtem" @click="subtem" @click.stop>
			      提交
			</view>
		</view>
	</view>
</template>

<script>
	import { userprofile } from "@/core/api/index.js";
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				username:'',
				urlimg:'',
				focus:false
			}
		},
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		onLoad() {
			this.urlimg = this.$imgurl	
			this.username = this.userInfo.nickname
		},
		methods:{
			// 处理外部点击事件
			handleOutsideClick() {
				this.focus = false;
			},
			bncime(e){
				this.username = e.detail.value
				this.focus = false; // 失焦时也设置focus为false
			},
			inputs(e){
				this.username = e.detail.value
			},
			async getUsere(){
			   const { _data } = await getUsere({userid:this.userInfo.userid})
			   this.UserInfo = _data
			},
			chooseavatar(e){
				uni.uploadFile({
					url: 'https://shequ.shihongkeji.cn' + '/webapi/file/upload',
					filePath: e.detail.avatarUrl,
					name: "file",
					header: {
					  'token': uni.getStorageSync('token')
					},
					success: uploadFileRes => {
						let updata = JSON.parse(uploadFileRes.data)
						this.userInfo.avatar =  'https:'  + updata.result.filePath
					}
				});
			},
			async subtem(){
				let parame = {
					avatar: this.userInfo.avatar,
					nickname:this.username
				}
				const res = await userprofile(parame)
				if(res.code == '00000'){
					uni.navigateBack({
						data:1
					})
					this.$store.dispatch('user/getUserInfo')
				}
			}
		}
	}
</script>
<style>
	page{
		background: #F2F2F2;
	}
</style>
<style lang="scss">
	.persnl{
		margin: 20rpx 20rpx 0;
		border-radius: 20rpx;
		background-color: #fff;
		min-height: 100vh; /* 确保点击页面任何区域都能触发 */
		button{
		 	border: none;
			background: #fff;
			width: 100%;
			display: flex;
			text-align: right;
			justify-content: flex-end;
			padding-right: 0 !important;
		}
		button::after{
			border: none !important;
		}
		.sculpture{
			padding: 20rpx 30rpx 0rpx;
			border-bottom: 1rpx solid rgba(232, 232, 232, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.us_image{
				display: flex;
				align-items: center;
				height: 150rpx;
				border-radius: 50%;
				    flex: 1;
				    justify-content: flex-end;
					
				.us_image_box {
					display: flex;
					align-items: center;
					    justify-content: inherit;
					width: 100%;
					input{
						text-align: right;
						padding-right: 35rpx;
					}
					.icons{
						position: absolute;
					}
					.arrow-icon {
						outline: none;
						transition: all 0.2s ease;
					}
					.arrow-icon:focus {
						box-shadow: 0 0 0 2rpx #FFAF67;
						border-radius: 50%;
						transform: scale(1.1);
					}
				}
			}
		}
		.subtem{
			width: 714rpx;
			height: 74rpx;
			background: linear-gradient( 90deg, #FFAF67 0%, #ED6D00 100%);
			box-shadow: inset 0rpx -1rpx 2rpx 1rpx #FFFFFF;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
			font-size: 32rpx;
		}
		.b_button{
			position: fixed;
			width: 100%;
			height: 137rpx;
			left: 0%;
			background: #FFFFFF;
			bottom: 0%;
			display: flex;
			justify-content: space-between;
			padding: 16rpx 30rpx;
		}
	}
</style>
